<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				<router-link :to="{name:'主页'}" style="color: #fff;text-decoration: none;"> {{collapsed?'':sysName}}</router-link>
			</el-col>
			<el-col :span="10">
				<!-- <div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div> -->
			</el-col>
			<el-col :span="10" class="userinfo">
					<span class="el-dropdown-link userinfo-inner">
						<!-- <img :src="this.sysUserAvatar" /> -->
						<span>您好，欢迎您进入仓库管理平台。 </span>
						<span style="color:#ffb716;margin-right:20px"> {{sysUserName}} </span>
						<span @click="logout">退出</span>
					</span>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				 <el-menu
					background-color="#31313A"
					text-color="#fff"
					active-text-color="#5AD091"
					:default-active="activeIndex"
					router
					style="overflow-y:auto;"
					>
					<NavMenu :navMenus="menuData"></NavMenu>
				</el-menu>
			</aside>
			<section v-if="$route.name == '主页'">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
			<section class="content-container" v-else>
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
						<strong class="title">{{$route.name}}</strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">
						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
	import NavMenu from "../components/NavMenu";
	export default {
		components: {
			NavMenu: NavMenu
		},
		data() {
			return {
				activeIndex:'aa',
				sysName:'仓库管理系统',
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				 menuData: [
					{
					//一级
					entity: {
						id:113,
						name: "Arrival",
						icon: "el-icon-s-help",
						alias: "到货管理",
						value: { path: "/Arrival" }
					},
					},
					{
					entity: {
						id: 211,
						name: "Warehousing",
						icon: "el-icon-s-tools",
						alias: "入库管理",
						value: { path: "/Warehousing" }
					},
					childs: [
						{
						entity: {
							id: 212,
							name: "Warehousing",
							icon: "el-icon-circle-plus-outline",
							alias: "入库管理",
							value: { path: "/Warehousing" }
						}
						}
					]
					},
					{
					entity: {
						id: 221,
						name: "stock",
						icon: "el-icon-user-solid",
						alias: "库存管理",
						value: ""
					},
					childs: [
						{
						entity: {
							id: 222,
							name: "stock",
							icon: "el-icon-user-solid",
							alias: "库存管理",
							value: { path: "/stock" }
						}
						},
					]
					},
					{
					entity: {
						id: 231,
						name: "Outbound",
						icon: "el-icon-s-tools",
						alias: "出库管理",
						value: ""
					},
					//三级
					childs: [
						{
						entity: {
							id: 232,
							name: "Outbound",
							icon: "el-icon-notebook-2",
							alias: "出库管理",
							value: { path: "/Outbound" }
						}
						},
					]
					},
					{
					//一级
					entity: {
						id:114,
						name: "classAdmin",
						icon: "el-icon-s-help",
						alias: "分类管理",
						value: { path: "/classAdmin" }
					},
					},
					// {
					// //一级
					// entity: {
					// 	id:115,
					// 	name: "",
					// 	icon: "el-icon-s-help",
					// 	alias: "统计报表",
					// 	value: {}
					// },
					// },
					// {
					// //一级
					// entity: {
					// 	id:125,
					// 	name: "",
					// 	icon: "el-icon-s-help",
					// 	alias: "报废处理",
					// 	value: {}
					// },
					// },
					// {
					// //一级
					// entity: {
					// 	id:145,
					// 	name: "",
					// 	icon: "el-icon-s-help",
					// 	alias: "报废统计",
					// 	value: {}
					// },
					// },
					// {
					// //一级
					// entity: {
					// 	id:165,
					// 	name: "",
					// 	icon: "el-icon-s-help",
					// 	alias: "财务模块",
					// 	value: {}
					// },
					// },
				]
			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				//console.log('handleopen');
			},
			handleclose() {
				//console.log('handleclose');
			},
			handleselect: function (a, b) {
			},
			//退出登录
			logout: function () {
				var _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					sessionStorage.removeItem('user');
					_this.$router.push('/login');
				}).catch(() => {

				});


			},
			//折叠导航栏
			collapse:function(){
				this.collapsed=!this.collapsed;
			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			}
		},
		mounted() {
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.name || '';
				this.sysUserAvatar = user.avatar || '';
			}

		}
	}

</script>

<style scoped lang="scss">
	@import '~scss_vars';
	
	.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 70px;
			line-height: 70px;
			background: $color-primary;
			// background:url('../assets/top.png')#3fb0fe 26% no-repeat;
			// background-size: 40%;
			// background-image: linear-gradient(#ddf0ff,#177eff );
			color:#fff;
			border-bottom: 1px solid #ccc;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:300px;
				height:70px;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {    
					width: 67px;
					float: left;
					margin: 10px 10px 10px -5px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:225px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 70px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 225px;
				width: 225px;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					height: 100%;
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 225px;
				width: 225px;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 300px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						width: 200px;
						font-size: 24px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
</style>